<template>
  <div class="auth">
    <bk-header></bk-header>
    <Row class="auth-content" type="flex" align="middle">
      <Col span="10" offset="2"></Col>

      <Col span="6" class="auth-form">
        <Tabs>
          <TabPane label="登录">
            <Form :model="login" :label-width="80">
              <FormItem label="账号">
                <Input placeholder="账号" v-model="login.username"></Input>
              </FormItem>
              <FormItem label="密码">
                <Input placeholder="密码" type="password" v-model="login.password"></Input>
              </FormItem>
              <FormItem>
                <Button long type="primary" @click="login_submit">登录</Button>
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="注册">
            <Form :model="register" :label-width="120">
              
            </Form>
          </TabPane>
        </Tabs></Col
      >
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: "",
        password: ""
      },
      register: {
        username: "",
        password: "",
        password2: ""
      },
      name: "登录"
    };
  },
  methods: {
    login_submit() {
      this.$api.auth.login(this.login.username, this.login.password).then(res => {
        this.$toast.success("登录成功");
        this.$store.commit("setLogin", this.login.username);
        if (res.token) {
          localStorage.setItem("token", res.token);
        }
        this.$router.push("/");
      });
    },
    sign_submit() {
      if (this.register.password !== this.register.password2 || this.register.password === "") {
        this.$toast.info("两次密码不一致");
        return;
      }
      this.$api.auth.register(this.register.username, this.register.password).then(() => {
        this.$toast.success("注册成功");
        this.register = {
          username: "",
          password: "",
          password2: ""
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.auth {
  height: 100%;
  overflow: hidden;
  .auth-content {
    height: 100%;
  }
  .auth-form {
    background: #fff;
    padding: 30px;
    margin-top: 15%;
    box-shadow: 0 0 10px #fff;
    border-radius: 4px;
  }
}
</style>
